<!--
 * @Author: your name
 * @Date: 2021-09-07 15:56:20
 * @LastEditTime: 2021-09-07 22:23:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \musicapp\src\views\listView.vue
-->
<template>
  <div class="listView">
      <listviewTop :playlist="state.playlist"></listviewTop>
      <playList :playlist="state.playlist"></playList>
  </div>
</template>

<script>
import playList from '@/components/playList.vue'
import listviewTop from '@/components/listviewTop.vue'
import {getPlayListDetail} from '@/api/index'
import {onMounted, reactive} from 'vue'
import {useRoute} from 'vue-router'
import store from '@/store/index.js'
export default {
    setup(){
        const route = useRoute();
        let state = reactive({
            list:[],
            playlist:{
                creator:{},
                tracks:{},
            }
            })
        onMounted(async() => {
            let id = route.query.id
            let result = await getPlayListDetail(id);
            state.playlist = result.data.playlist
            store.commit('setPlaylist',state.playlist.tracks)

            console.log(result);
        })
        return {
            state
        }
    },
    components:{
        listviewTop,
        playList
    }
}
</script>

<style>

</style>